import React, { Component } from 'react'
import '../assets/style/selectOptions.less'
import { List, Picker } from 'antd-mobile';
import Input from '../components/Input'
const Item = List.Item;

export default class selectOptions extends Component {

    constructor(props) {
        super(props)
      
        this.state ={
            status: false,
        }
    }
    input=''
    getfocus = (data) => {
       this.input = data
    }
    click = () => {
        this.input.focus()
    }
    render() {
        return (
            <div className={"selectOption "+this.props.className}>
                {
                    this.props.data ? <Picker
                        data={this.props.data}
                        cols={this.props.cols}
                        onOk={this.props.onOk}
                        visible={this.props.visible}
                        cascade={this.props.cascade}
                        onDismiss={this.props.onDismiss}
                        extra=" "
                    >
                        <Item arrow={this.props.horizontal} onClick={this.props.onClick} >
                            <span className="title">{this.props.title}</span>
                            <div>
                                <Input type={this.props.type?this.props.type:'text'} value={this.props.value ? this.props.value : ""} className="input"  placeholder={this.props.placeholder} onFocus={this.props.onFocus} />
                            </div>
                        </Item>
                    </Picker> : <Item arrow={this.props.horizontal} multipleLine onClick={this.click} >
                        <span className="title">{this.props.title}</span>
                        <div>
                                <Input type={this.props.type ? this.props.type : 'text'} getfocus={this.getfocus}  end={this.props.end} value={this.props.value ? this.props.value : ""} className="input"  placeholder={this.props.placeholder} onFocus={this.props.onFocus} onBlur={this.props.onBlur} />
                        </div>
                    </Item>
                }
            </div>
        )
    }
}
